<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 800px;
      height: 600px;
      background-color: orange;
    }

    li {
      list-style: none;
      width: 100px;
      height: 100px;
      float: left;
      margin: 10px;
      background-color: skyblue;
    }

    button {
      width: 200px;
      height: 50px;
    }
  </style>
</head>
<body>

  <button>插入一个 li</button>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>
        // var uls = document.getElementsByTagName('ul')[0];
        // var btn = document.querySelector('button');

        // btn.onclick = function(){
        //     var li = document.createElement('li');
        //     li.innerHTML = '我是新来的';
        //     uls.appendChild(li);
        // }

        // btn.onclick = function(){
        //     for(var i=0;i<6;i++){
        //         var li = document.createElement('li');
        //         li.innerHTML = '我是新来的'+i;
        //         uls.appendChild(li);
        //     }
        // }

        // var lis = document.querySelectorAll('li');
        // lis.forEach(function(item){
        //     item.onclick = function(){
        //         console.log(this.innerText);
        //     }
        // })
        // 缺点:
        // 这种对后期动态操作的不太友好  只能获取刚渲染的6个 
        // 不能获取后期动态添加的li的内容
        // 对过多的dom元素才去了操作 会影响性能

        //解决方案:
        // 事件委托
        


        // 目标是 点击按钮 添加 li元素到ul的结尾 
        // 用户点击每个li 都能打印出li的内容 

        // 原生写法  获取ul btn 每个li  
        //  需要给li 循环绑定事件  
        // 而且不能获取动态添加的li 的内容


        // 下面的写法  只需要给ul绑定事件
        // 后期动态添加的li 也可以获取到内容
        // 减少了dom的操作  
        var uls = document.getElementsByTagName('ul')[0];
        var btn = document.querySelector('button');
        uls.onclick = function(e){
            // 因为li把所有的都委托给了ul 

            // 找到目标 然后 打印 
            // e.target 是目标节点 
            // nodeName 是节点的名称 得到是大写 
            if(e.target.nodeName == 'LI'){
                console.log(e.target.innerText);
            }
        }
        // webstorm 
        btn.onclick = function(){
            var li = document.createElement('li');
            li.innerHTML = '我是新来的';
            uls.appendChild(li);
        }

        // 优点:
        // 减少循环绑定  
        // 减少dom操作




  </script>

</body>

</html>